import React, { Component } from "react";
// 由于是根目录，没有this.props
import { withRouter } from "react-router-dom";

// 导入验证码模块
import Captcha from "@/components/Captcha";
// 导入登录验证
import models from "@/models/common";

// 导入antd
import { Form, Input, Button, Row, Col, message } from "antd";

const layout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 18,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

class NormalLogin extends Component {
  // 初始化状态
  state = {
    key: "",
    loading:false
  };
  render() {
    return (
      <div>
        <h1>账号登录:</h1>
        <Form
          {...layout}
          name="basic"
          initialValues={{
            remember: true,
          }}
          onFinish={this.onFinish}
          onFinishFailed={this.onFinishFailed}
        >
          <Form.Item
            label="用户名"
            name="username"
            rules={[
              {
                required: true,
                message: "请输入用户名!",
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[
              {
                required: true,
                message: "请输入密码!",
              },
            ]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item label="验证码" extra="人机验证">
            <Row gutter={8}>
              <Col span={14}>
                <Form.Item
                  name="captcha"
                  noStyle
                  rules={[
                    {
                      required: true,
                      message: "请输入验证码!",
                    },
                  ]}
                >
                  <Input />
                </Form.Item>
              </Col>
              <Col span={10}>
                <Captcha
                  ref={(c) => (this.change = c)}
                  height="31.6px"
                  width="100px"
                  setKey={this.setKey}
                />
              </Col>
            </Row>
          </Form.Item>
          <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit" loading={this.state.loading}>
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }

  // 用户格式正确，登录后验证码的函数
  onFinish = (values) => {
    values.key = this.state.key;
    models.normalLogin(values).then((ret) => {
      if (ret.errNo === 0) {
        this.setState(()=>{
          return {
            loading:true
          }
        })
        message.success(ret.message);
        setTimeout(() => {
          this.props.history.push("/home");
        }, 1000);
      } else {
        message.error(ret.message);
        this.change.clickCode();
      }
    });
  };

  // 用户格式错误
  onFinishFailed = (errorInfo) => {
    // console.log("Failed:", errorInfo);
  };

  // 获取在登录时需要传入后端验证码的key
  setKey = (key) => {
    this.setState(() => {
      return { key };
    });
  };
}

export default withRouter(NormalLogin);
